<template>
    <div class="system cont">
        <h3>一级目录：</h3>
        <ul class="menu">
            <li
                v-for="(item,idx) in navData"
                :key="item.id"
                @click="twoMenu(idx)"
            >{{item.name}}</li>
        </ul>
        <div class="twoMenuBox">
            <menu-list
                v-for="item in menuData"
                :key="item.id"
                :title="item.name"
                :id="item.id"
            ></menu-list>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import MenuList from "@/components/MenuList.vue"
import { getSystemNav } from "@/api"

export default {
    components:{
        MenuList
    },
    data(){
        return {
            navData: [],
            menuData: []
        }
    },
    created() {
        getSystemNav().then(res=>{
            console.log(res.data.data);
            this.navData = res.data.data;
            this.menuData = this.navData[0].children;
        })
    },
    methods: {
        twoMenu(i){
            this.menuData = this.navData[i].children
        }
    },
}
</script>

<style lang="less">
.system{
    .menu{
        width:100%;
        line-height: 40px;
        display: flex;
        flex-wrap: wrap;
        margin:0;padding:0;list-style:none;
        li{
            margin:4px;padding:4px;border-radius:4px;
            text-align:center;
            font-weight: bold;
            color: #2c3e50;
            &.router-link-exact-active {
                color: #42b983;
            }
            &:hover{
                background: #f6f6f6;
            }
            &:active{
                background: #efefef;
            }
        }
    }
    .twoMenuBox{
        display:flex;
    }
}
</style>